﻿.active-chat {
    display: flex;
    position: relative;
    overflow: hidden;
    border-width: 0;
    padding-right: 20px;
    height: 400px;
    justify-content: flex-end;
    flex-direction: column;
}

    .active-chat .conversation-start {
        position: relative;
        width: 100%;
        margin-bottom: 27px;
        text-align: center;
    }

        .active-chat .conversation-start span {
            font-size: 14px;
            display: inline-block;
            color: grey;
        }

    .active-chat .bubble:nth-of-type(6) {
        -webkit-animation-duration: 0.9s;
        animation-duration: 0.9s;
    }

    .active-chat .bubble {
        transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
    }

        .active-chat .bubble.you {
            float: left;
            color: white;
            background-color: green;
            align-self: flex-start;
            -webkit-animation-name: slideFromLeft;
            animation-name: slideFromLeft;
        }

    .active-chat .bubble {
        font-size: 16px;
        position: relative;
        display: inline-block;
        clear: both;
        margin: 0px 7px 7px 7px;
        padding: 13px 14px;
        vertical-align: top;
        border-radius: 5px;
    }

        .active-chat .bubble.me {
            float: right;
            background-color: #eceff1;
            align-self: flex-end;
            -webkit-animation-name: slideFromRight;
            animation-name: slideFromRight;
        }

.bubble:before {
    position: absolute;
    top: 19px;
    display: block;
    width: 8px;
    height: 6px;
    content: '\00a0';
    -webkit-transform: rotate(29deg) skew(-35deg);
    transform: rotate(29deg) skew(-35deg);
}

.bubble.you:before {
    left: -3px;
    background-color: green;
}
.bubble.me:before {
    right: -3px;
    background-color: #eceff1;
}
.chat.active-chat {
    display: block;
    display: flex;
}

.active-chat .bubble {
    transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
}

    .active-chat .bubble:nth-of-type(1) {
        -webkit-animation-duration: 0.15s;
        animation-duration: 0.15s;
    }

    .active-chat .bubble:nth-of-type(2) {
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
    }

    .active-chat .bubble:nth-of-type(3) {
        -webkit-animation-duration: 0.45s;
        animation-duration: 0.45s;
    }

    .active-chat .bubble:nth-of-type(4) {
        -webkit-animation-duration: 0.6s;
        animation-duration: 0.6s;
    }

    .active-chat .bubble:nth-of-type(5) {
        -webkit-animation-duration: 0.75s;
        animation-duration: 0.75s;
    }

    .active-chat .bubble:nth-of-type(6) {
        -webkit-animation-duration: 0.9s;
        animation-duration: 0.9s;
    }

    .active-chat .bubble:nth-of-type(7) {
        -webkit-animation-duration: 1.05s;
        animation-duration: 1.05s;
    }

    .active-chat .bubble:nth-of-type(8) {
        -webkit-animation-duration: 1.2s;
        animation-duration: 1.2s;
    }

    .active-chat .bubble:nth-of-type(9) {
        -webkit-animation-duration: 1.35s;
        animation-duration: 1.35s;
    }

    .active-chat .bubble:nth-of-type(10) {
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
    }

@keyframes slideFromLeft {
    0% {
        margin-left: -200px;
        opacity: 0;
    }

    100% {
        margin-left: 0;
        opacity: 1;
    }
}

@-webkit-keyframes slideFromLeft {
    0% {
        margin-left: -200px;
        opacity: 0;
    }

    100% {
        margin-left: 0;
        opacity: 1;
    }
}

@keyframes slideFromRight {
    0% {
        margin-right: -200px;
        opacity: 0;
    }

    100% {
        margin-right: 0;
        opacity: 1;
    }
}

@-webkit-keyframes slideFromRight {
    0% {
        margin-right: -200px;
        opacity: 0;
    }

    100% {
        margin-right: 0;
        opacity: 1;
    }
}
